<!-- 商品详情 -->
<template>
  <div class="goods-details">
    <van-nav-bar fixed :title="title" safe-area-inset-top>
      <template #left>
        <img style="width: 30px; margin-right: 10px" src="../../assets/images/返回2.png" @click="() => $router.go(-1)"
          alt="" />
        <img style="width: 30px" @click="() => $router.push({ path: '/' })" src="../../assets/images/返回首页.png" alt="" />
      </template>
    </van-nav-bar>
    <!--  -->
    <!-- <van-tabs v-model="active" background="none" @click="change" color="rgba(0,0,0,0)" title-active-color="#3e96e8">
      <van-tab :name="item.id" :title="item.label" v-for="item in tabs" :key="item.id"></van-tab>
    </van-tabs> -->

    <div class="content">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image.imgurl" style=" object-fit: cover;" />
        </van-swipe-item>
      </van-swipe>
      <div class="price">￥{{info.goods_price}} <span>{{info.line_price}}</span></div>
      <div class="name">{{info.goods_name}}</div>
      <!-- <div class="totip">根据水槽龚玥菲</div> -->
      <div class="tags">
        <div>
          <van-icon size="0.5rem" name="passed" color="#3e96e8" />
          <span>可退换</span>
        </div>
        <div>
          <van-icon size="0.5rem" name="passed" color="#3e96e8" />
          <span>48小时发货</span>
        </div>
        <div>
          <van-icon size="0.5rem" name="passed" color="#3e96e8" />
          <span>假一赔十</span>
        </div>
        <div>
          <van-icon size="0.5rem" name="passed" color="#3e96e8" />
          <span>现货</span>
        </div>
      </div>
    </div>

    <div class="line">
      <van-divider :style="{ color: '#000', borderColor: '#000' }">商品详情</van-divider>
    </div>

    <div class="details" v-html="info.content">

    </div>
    <!-- 选规格 -->
    <van-action-sheet v-model="show" title="" :round="false">
      <div class="spec">
        <div class="title">
          <img :src="info.imgurl" alt="" />
          <div class="name">
            <van-icon class="icon" name="cross" size="0.8rem" color="#3e96e8" @click="show = false" />
            <div><span>￥</span>{{spec.goods_price}}</div>
          </div>
        </div>
        <div class="type">规格</div>
        <ul>
          <li v-for="i in info.spec" :key="i.id" @click="changetype(i)" :class="type == i.id ? 'active' : ''">
            {{i.spec_value}}
          </li>
        </ul>
        <div class="num">
          <span>数量</span>
          <van-stepper v-model="num" input-width="40px" button-size="22px" />
        </div>
        <!-- <van-field v-model="remark" label="备注" placeholder="备注内容需要和商家协商确认" input-align="right" /> -->
        <div class="btn">
          <div @click="addcart">加入购入车</div>
          <div @click="buy">立即购买</div>
        </div>
      </div>
    </van-action-sheet>

    <!-- 底部操作栏 -->
    <van-goods-action>
      <!-- <van-goods-action-icon icon="shop-o" text="店铺" badge="12" /> -->
      <!-- <van-goods-action-icon icon="chat-o" text="客服" dot /> -->
      <!-- <van-goods-action-icon icon="cart-o" text="购物车" badge="5" /> -->
      <van-goods-action-button color="rgb(66,224,209)" type="warning" text="加入购物车" @click="show = true" />
      <van-goods-action-button color="rgb(92,155,246)" type="danger" text="立即购买" @click="show = true" />
    </van-goods-action>
  </div>
</template>

<script>
import Bus from '../../utils/bus.js'
import { goodsInfo } from "../../api/goods";
import { cartAdd } from "../../api/cart";
export default {
  name: "",
  data() {
    return {
      show: false,
      active: 1,
      goodsId: 1,
      type: 1,
      remark: "",
      num: '',
      title: "鱼饲料",
      tabs: [
        {
          id: 1,
          label: "商品",
        },
        {
          id: 2,
          label: "详情",
        },
        // {
        //   id: 3,
        //   label: "评价",
        // },
        // {
        //   id: 4,
        //   label: "推荐",
        // },
      ],
      images: [
   
      ],
      info: {},
      spec: {}
    };
  },
  methods: {
    changetype(val) {
      this.type = val.id;
      this.info.imgurl = val.imgurl;
      this.spec = val;
    },
    change(name, title) {
      console.log(name, title);
    },
    buy() {

      var obj = Object.assign({}, this.spec);
      obj.num = this.num;
      obj.goods_spec_id = this.spec.id;
      obj.goods_attr = this.spec.spec_value;
      obj.goods_name = this.info.goods_name;


      this.$router.push({ path: "/buy", query: obj });
    },
    async getData() {
      let res = await goodsInfo({ id: this.$route.query.id });
      console.log("res",res);
      if (res.status == 200) {
        this.info = res.data;
        this.images = res.data.imglist;
        if (res.data.spec.length > 0) {
          this.spec = res.data.spec[0];
        }
      }else{
        this.$router.push({ path: "/404", query: {} });
      }
    },
    async addcart() {

      var obj = Object.assign({}, this.spec);
      obj.userid = localStorage.getItem("userid");
      obj.num = this.num;
      obj.goods_spec_id = this.spec.id;
      obj.goods_attr = this.spec.spec_value;
      let res = await cartAdd(obj);
      if (res.status == 200) {
        this.$toast("加入成功");
        Bus.$emit('cart', "success")

        this.show = false;
      }

    }
  },
  computed: {},
  watch: {},
  created() {
    this.getData();
  },
  mounted() { },
};
</script>

<style lang="scss" scoped>
.goods-details {
  width: 100%;
  padding-top: 92px;
  padding-bottom: 100px;

  .spec {
    width: 100%;

    .btn {
      width: 100%;
      height: 100px;
      padding: 0 -20px;
      display: flex;
      font-size: 40px;
      color: #fff;

      > :first-child {
        width: 50%;
        background-color: rgb(66, 224, 209);
        line-height: 100px;
        text-align: center;
      }

      > :last-child {
        flex: 1;
        line-height: 100px;
        text-align: center;
        background-color: rgb(92, 155, 246);
      }
    }

    .title {
      display: flex;
      padding: 20px 30px;

      img {
        width: 200px;
        height: 150px;
      }

      .name {
        margin-left: 20px;
        flex: 1;
        height: 150px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .icon {
          align-self: flex-end;
        }

        > :last-child {
          color: #3e96e8;
          font-size: 45px;
          font-weight: bold;

          span {
            font-size: 28px;
          }
        }
      }
    }

    .type {
      padding: 10px 30px;
      font-size: 28px;
    }

    ul {
      display: flex;
      padding: 10px 30px;

      .active {
        background-color: #3e96e8;
        color: #fff;
      }

      li {
        background-color: #ccc;
        color: #000;
        padding: 10px 20px;
        border-radius: 25px;
      }

      li~li {
        margin-left: 10px;
      }
    }

    .num {
      padding: 10px 30px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 28px;
    }
  }

  .line {
    padding: 0 30%;
  }

  .details {
    padding: 30px;
    background-color: #fff;

    img {
      width: 100%;
    }
  }

  .content {
    background-color: #fff;
    padding: 30px;

    .totip {
      background-color: rgb(249, 249, 249);
      font-size: 30px;
      padding: 15px 10px;
      margin-top: 10px;
      color: rgb(171, 171, 171);
    }

    .tags {
      height: 70px;
      display: flex;
      font-size: 28px;
      align-items: center;

      >div {
        display: flex;
        align-items: center;
      }

      span {
        margin-left: 5px;
      }

      >div~div {
        margin-left: 20px;
      }
    }

    .name {
      font-size: 40px;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .price {
      font-size: 50px;
      color: #3e96e8;
      font-weight: bold;
      margin-top: 20px;

      span {
        text-decoration: line-through;
        font-size: 30px;
        color: rgb(171, 171, 171);
      }
    }

    img {
      width: 100%;
      height: 400px;
      border-radius: 25px;
    }
  }
}
</style>